<!--
  * 订单表
  *
  * @Author:    zhoujk
  * @Date:      2025-01-26 06:40:44
-->
<template>
  <!---------- 表格 begin ----------->
  <a-table
    size="small"
    :dataSource="tableData"
    :columns="tableConfigInfo[props.type]"
    rowKey="id"
    bordered
    :loading="tableLoading"
    :pagination="false"
  >
    <template #bodyCell="{ record, column }">
      <template v-if="column.dataIndex === 'action'">
        <div class="smart-table-operate">
          <a-button @click="refundForm(record)" type="link" v-if="props.type == 'refund'">退款</a-button>
          <a-button @click="goTo('/refund/list', record)" type="link" v-if="props.type == 'detail'">退款流水</a-button>
        </div>
      </template>
    </template>
  </a-table>
  <!---------- 表格 end ----------->

  <RefundModal ref="formRef" @success="queryData" />
  <RefundOrderList v-model:open="refundOrder.open" :row-data="refundOrder.rowData" />
</template>
<script setup>
  import { onMounted, reactive, ref, getCurrentInstance, watch } from 'vue'
  import { message } from 'ant-design-vue'
  import { smartSentry } from '/@/lib/smart-sentry'
  import { orderApi as orderApiMerchant } from '/@/api/business/b-merchant/order/order-api'
  import { orderApi as orderApiOperation } from '/@/api/business/b-operation/order/order-api'
  import RefundModal from '../refund/refund-modal.vue'
  import RefundOrderList from './refund-order-list.vue'
  import dayjs from 'dayjs'
  import { formatToMoney, selectDictLabel } from '/@/utils/common'
  import { ZZB_PAY_WAY } from '/@/constants/dict'
  import { useRouter } from 'vue-router'

  import { useUserStore } from '/@/store/modules/system/user'
  const USER_TYPE = useUserStore().userType // 用户类型: 1-平台;2-代理;4-商户

  const { proxy } = getCurrentInstance()
  const router = useRouter()

  const apiSource = {
    listApi: (data) => {
      if (USER_TYPE == '4') return orderApiMerchant.page(data)
      if (USER_TYPE == '1') return orderApiOperation.page(data)
    },
  }

  const emit = defineEmits(['refresh'])

  const props = defineProps({
    // 父组件传过来的值
    rowData: {
      type: Object,
      default: () => {},
    },
    type: {
      type: String,
      default: 'refund',
    },
  })
  // ---------------------------- 表格列 ----------------------------
  // 退款订单列表
  const tableConfigInfo = {
    refund: [
      {
        title: '交易订单号',
        dataIndex: 'id',
        ellipsis: true,
      },
      {
        title: '交易类型',
        dataIndex: 'payType',
        customRender: ({ text }) => proxy.$smartEnumPlugin.getDescByValue('ZZB_PAY_TYPE_ENUM', text),
        ellipsis: true,
      },
      {
        title: '支付方式',
        dataIndex: 'payWay',
        customRender: ({ text }) => selectDictLabel(ZZB_PAY_WAY, text),
        ellipsis: true,
      },
      {
        title: '交易金额',
        dataIndex: 'tradeAmt',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmt',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      // {
      //   title: '实收金额',
      //   dataIndex: 'settleAmt',
      //   customRender: (column) => formatToMoney(column.text / 100),
      //   ellipsis: true,
      // },
      // {
      //   title: '结算金额',
      //   dataIndex: 'settleAmt',
      //   customRender: (column) => formatToMoney(column.text / 100),
      //   ellipsis: true,
      // },
      {
        title: '交易时间',
        dataIndex: 'fTime',
        customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
        width: 180,
        ellipsis: true,
      },
      // {
      //   title: '退款时间',
      //   dataIndex: 'fTime',
      //   customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
      //   width: 180,
      //   ellipsis: true,
      // },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 90,
      },
    ],
    detail: [
      {
        title: '交易订单号',
        dataIndex: 'id',
        ellipsis: true,
      },
      {
        title: '交易金额',
        dataIndex: 'tradeAmt',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '退款金额',
        dataIndex: 'refundAmt',
        customRender: (column) => formatToMoney(column.text / 100),
        ellipsis: true,
      },
      {
        title: '交易时间',
        dataIndex: 'fTime',
        customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
        width: 180,
        ellipsis: true,
      },
      {
        title: '交易类型',
        dataIndex: 'payType',
        customRender: ({ text }) => proxy.$smartEnumPlugin.getDescByValue('ZZB_PAY_TYPE_ENUM', text),
        ellipsis: true,
      },
      {
        title: '支付方式',
        dataIndex: 'payWay',
        customRender: ({ text }) => selectDictLabel(ZZB_PAY_WAY, text),
        ellipsis: true,
      },
      {
        title: '门店名称',
        dataIndex: 'storeAbbrName',
        ellipsis: true,
      },
      {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 90,
      },
    ],
  }
  const columns = ref([
    {
      title: '交易订单号',
      dataIndex: 'id',
      ellipsis: true,
    },
    {
      title: '交易类型',
      dataIndex: 'payType',
      customRender: ({ text }) => proxy.$smartEnumPlugin.getDescByValue('ZZB_PAY_TYPE_ENUM', text),
      ellipsis: true,
    },
    {
      title: '支付方式',
      dataIndex: 'payWay',
      customRender: ({ text }) => selectDictLabel(ZZB_PAY_WAY, text),
      ellipsis: true,
    },
    {
      title: '交易金额',
      dataIndex: 'tradeAmt',
      customRender: (column) => formatToMoney(column.text / 100),
      ellipsis: true,
    },
    {
      title: '退款金额',
      dataIndex: 'refundAmt',
      customRender: (column) => formatToMoney(column.text / 100),
      ellipsis: true,
    },
    // {
    //   title: '实收金额',
    //   dataIndex: 'settleAmt',
    //   customRender: (column) => formatToMoney(column.text / 100),
    //   ellipsis: true,
    // },
    // {
    //   title: '结算金额',
    //   dataIndex: 'settleAmt',
    //   customRender: (column) => formatToMoney(column.text / 100),
    //   ellipsis: true,
    // },
    {
      title: '交易时间',
      dataIndex: 'fTime',
      customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
      width: 180,
      ellipsis: true,
    },
    // {
    //   title: '退款时间',
    //   dataIndex: 'fTime',
    //   customRender: (column) => dayjs(column.text).format('YYYY-MM-DD HH:mm:ss'),
    //   width: 180,
    //   ellipsis: true,
    // },
    {
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 90,
    },
  ])

  // ---------------------------- 查询数据表单和方法 ----------------------------

  const queryFormState = {
    id: undefined, //订单号
    orderIds: '-1', //订单号
    storeId: undefined, //门店编号
    storeStaffId: undefined, //门店店员编号
    channelId: undefined, //支付通道
    payType: undefined, //交易类型
    pageNo: 1,
    pageSize: 10,
  }
  // 查询表单form
  const queryForm = ref({ ...queryFormState })
  // 表格加载loading
  const tableLoading = ref(false)
  // 表格数据
  const tableData = ref([])
  // 总数
  const total = ref(0)

  // 查询数据
  async function queryData() {
    tableLoading.value = true
    try {
      let queryResult = await apiSource.listApi(queryForm.value)
      tableData.value = queryResult.data
      total.value = queryResult.total
    } catch (e) {
      smartSentry.captureError(e)
    } finally {
      tableLoading.value = false
    }
  }

  onMounted(queryData)

  watch(
    () => props.rowData,
    (newVal) => {
      if (props.rowData.orderIds) {
        queryForm.value.orderIds = newVal.orderIds
        queryData()
      }
    },
    { immediate: true },
  )
  // ---------------------------- 退款 ----------------------------
  const formRef = ref()

  function refundForm(data) {
    formRef.value.show(data)
  }

  // 退款流水
  const refundOrder = ref({
    open: false,
    rowData: null,
  })
  function refundTable(data) {
    refundOrder.value.open = true
    refundOrder.value.rowData = data
  }

  function goTo(url, data) {
    router.push({ path: url, query: data })
    emit('refresh')
  }
</script>
